<template>
  <div>
    <div class="header-nav">
      <div class="header-nav-left" @click="$router.push({path:'/'})">
        <img :src="logoImg" />
      </div>
      <div class="header-nav-right">
        <span>{{currenName}}</span>
      </div>
      <div style="float:none;clear:both">
      </div>
    </div>
    <div class="main-section">
      <div class="main-section-left-box">
          <div class="left-box-mession">
            预申报后自动刷卡取飞(交柜请提前验箱)
          </div>
          <div class="left-box-center">
            <img :src="swipe" />
          </div>
          <div class="left-box-center2">
            <img :src="smile" />
            <div class="left-box-center2-mession">
            {{mession}}
            </div>
          </div>
        </div> 
        <div class="main-section-right-box">
          <div class="right-box">
            <p>PCC卡信息</p>
            <div class="right-box-form">
              <div class="right-box-form-item">
                <div class="right-box-form-item-label">PCC卡号：</div>
                <div class="right-box-form-item-input"></div>
              </div>
              <div class="right-box-form-item">
                <div class="right-box-form-item-label">车牌号：</div>
                <div class="right-box-form-item-input"></div>
              </div>
            </div>
          </div>
          <div class="right-box">
            <p>身份证信息</p>
            <div  class="right-box-form">
               <div class="right-box-form-item">
                <div class="right-box-form-item-label">姓名：</div>
                <div class="right-box-form-item-input"></div>
              </div>
              <div class="right-box-form-item">
                <div class="right-box-form-item-label">身份证号码：</div>
                <div class="right-box-form-item-input"></div>
              </div>
            </div>
          </div>
        </div>
        <div style="float:none;clear:both"></div>
        <div class="main-section-bottom-box">
          <div class="bottom-box-title">
            <svg-icon iconClass="tips" style="margin:0 5%" />
            注意事项
          </div>
          <div class="bottom-box-tips"> 
          {{tips}}
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import logoImg from '@/assets/newLogo.png';
import swipe from '@/assets/swipe.png';
import smile from '@/assets/smile.png';
  export default {
    name: "home",
    data(){
      return {
        logoImg,
        swipe,
        smile,
        currenName:this.$route.meta.title,
        mession:'您的交柜未进行PAS申报(验箱的箱号未进行PAS申报)，请核查PAS申报资料',
        tips:'请不要在飞仔未打印完毕时拉扯飞仔纸,以免导致卡纸'
      }
    },
    watch: {
      $route(val) {
        this.currenName = val.meta.title
      },
    }
  }
</script>

<style scoped>
.header-nav{
  width: 100%;
  height: 45px;
  padding:0 15px;
  background: linear-gradient(180deg, #F7FBFF 0%, #EBF0FF 100%);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -1px 2px 0px #B0B9CE;
}
.header-nav>.header-nav-left{
  float:left;
  cursor:pointer;
}
.header-nav>.header-nav-left>img{
   height:35px;
   margin-top:5px;
}
.header-nav>.header-nav-right{
  float:right;
  height:100%;
  display:flex;
  align-items:center;
}
.header-nav>.header-nav-right>span{
  font-size: 17px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #213767;
  line-height: 26px;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
}
.main-section{
  width:100%;
  background:url('@/assets/bg.png');
  height:calc(100vh - 45px);
  overflow:hidden;
  background-size:100% 100%;
  background-repeat: no-repeat;
  padding:25px;
}
.main-section-left-box{
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 62%;
  height: 70%;
  float:left;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content: space-evenly;
}
.main-section-right-box{
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 35%;
  height: 70%;
  float:right;
  padding:5%;
  flex-direction: column;
  display: flex;
  padding: 2%;
  justify-content: space-between;
}
.right-box{
  height:48%;
  width:100%
}
.right-box-form{
  background:#fff;
  width:100%;
  height:80%;
  border-radius: 5px;
  flex-direction: column;
  display: flex;
  padding:4%;
}
.right-box-form-item{
  height:80%;
  width:100%;
  display:flex;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-box-form-item-label{
  font-size: 9px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #1B1B1B;
  line-height: 14px;
  width: 20%;
  text-align: right;
  max-width:200px;
}
.right-box-form-item-input{
  width:80%;
  height:70%;
  background: #E1F0FF;
  border-radius: 4px;
  cursor: not-allowed;
}
.right-box p{
  font-size: 13px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 20px;
  margin:2%;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.main-section-bottom-box{
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  margin-top:3%;
  height: 25%;
}
.left-box-mession{
  font-size: 12px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #FFFFFF;
  width: 100%;
  text-align: center;
  height: 18px;
}
.left-box-center{
  width:90%;
  height:40%;
  position: relative;
  background:url('@/assets/bg2.png');
  border-radius: 15px;
  background-size: 100% 100%;
}
.left-box-center2{
  width:90%;
  height:40%;
  position: relative;
  background:url('@/assets/bg3.png');
  border-radius: 15px;
  background-size: 100% 100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0 5%;
}
.left-box-center2>img{
  height:50%;
  margin-right:5%;
}
.left-box-center2-mession{
  height:70%;
  width:100%;
  font-size: 21px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #196CC8;
  display: flex;
  align-items: center;
}
.left-box-center>img{
  position:absolute;
  width: 25%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.main-section-bottom-box{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.bottom-box-title{
  background:#fff;
  width: 15%;
  height: 20%;
  display:flex;
  align-items: center;
  justify-content:center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #3D89E7;
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
}
.bottom-box-tips{
  height:100%;
  width:80%;
  display:flex;
  align-items: center;
  justify-content:center;
  font-size: 11px;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #FFFFFF;
}
</style>